<template>
  <el-main style="padding: 0px 15px">
    <el-form size="normal">
      <el-form-item style="margin-bottom: 0px; padding: 10px">
        <el-button
          v-if="hasPerm('sys:menu:add')"
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="showMenuDialog('0')">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :height="tableHeight"
      :data="menuList"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children' }"
      border
      stripe>
      <el-table-column prop="label" label="菜单名称"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center">
        <!-- 需要判断是element的图表还是阿里巴巴的图标 -->
        <template slot-scope="scope">
          <!-- element图标 -->
          <i
            :class="scope.row.icon"
            v-if="scope.row.icon.includes('el-icon')"></i>
          <!-- 阿里巴巴图标 -->
          <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="code" label="权限字段"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <!-- <el-table-column prop="url" label="组件路径"></el-table-column> -->
      <el-table-column prop="type" label="菜单类型" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == '0'" size="normal" effect="dark">
            目录
          </el-tag>
          <el-tag
            type="success"
            v-else-if="scope.row.type == '1'"
            size="normal">
            菜单
          </el-tag>
          <el-tag
            type="warning"
            v-else-if="scope.row.type == '2'"
            size="normal"
            effect="dark">
            按钮
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="hasPerm('sys:menu:edit')"
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="showMenuDialog('1', scope.row)">
            编辑
          </el-button>
          <el-button
            v-if="hasPerm('sys:menu:delete')"
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteMenu(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或编辑弹框 -->
    <menu-dialog-vue ref="menuDialog" @onConfirm="onConfirm"></menu-dialog-vue>
  </el-main>
</template>

<script>
import {
  getMenuListApi,
  addMenuApi,
  editMenuApi,
  deleteMenuApi
} from '@/api/menu'
import menuDialogVue from './menuDialog.vue'
export default {
  components: {
    menuDialogVue
  },
  data() {
    return {
      // 给表格高度的原因是,表格滑动的时候,新增按钮也被同时滑动了
      tableHeight: 500,
      // 菜单数量列表
      menuList: []
    }
  },
  created() {
    this.getMenuList()
  },
  mounted() {
    this.$nextTick(() => {
      // 这里直接给一个固定的高度，可以让表格相对固定
      console.log('window.innerHeight', window.innerHeight)
      this.tableHeight = window.innerHeight - 180
    })
  },
  methods: {
    // 新增或编辑确认
    async onConfirm(val) {
      let res = null
      if (val.editType === '0') {
        // 新增
        res = await addMenuApi(val)
      } else {
        // 编辑
        res = await editMenuApi(val)
      }
      if (res && res.code === 200) {
        // 刷新列表
        this.getMenuList()
        this.$message.success(res.msg)
      }
    },
    // // 新增按钮
    // addMenu() {
    //   this.$refs.menuDialog.show('0')
    // },
    // // 编辑按钮
    // editMenu(type, row) {
    //   console.log(type, row)
    //   // this.$refs.menuDialog.show('1', row)
    // },
    // 合并新增和编辑事件为同一个
    showMenuDialog(type, val) {
      this.$refs.menuDialog.show(type, val)
    },
    // 删除按钮
    async deleteMenu(row) {
      let confirm = await this.$myconfirm('确定删除该数据吗?')
      if (confirm) {
        let parm = {
          id: row.id
        }
        let res = await deleteMenuApi(parm)
        if (res && res.code === 200) {
          // 刷新列表
          this.getMenuList()
          this.$message.success(res.msg)
        }
      }
    },
    // 获取菜单数据
    async getMenuList() {
      let res = await getMenuListApi()
      if (res && res.code === 200) {
        this.menuList = res.data
        console.log(this.menuList)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
